<template>
	<view class="pages">
		<!-- 客服 -->
		<uni-popup ref="serverPopup" type="center" :animation="true" @change="changePopup($event,'serverPopup')">
			<view class="modal">
				<view class="modal-wrapper">
					<view class="psdBox">
						<view class="psdBox-wrapper">
							<view class="psdBox-header">请选择您要联系的客服</view>
							<view class="serverBox">
								<view class="serverBox-tips">我们根据选择为您提供服务</view>
								<view class="serverBox-list">
									<view class="serverBox-list__item" v-for="(item,index) in 3" :key="index">
										<view class="serverImgBox">
											<image src="@/static/index/server.png" mode=""></image>
										</view>
										<view class="serverContent">
											<view class="name">客服{{ index+1 }}号</view>
											<view class="account" v-if="index == 0">
												<text>{{ systemParam.CUSTOMER_SERVICE_ONE }}</text>
												<image @tap.stop="$tools.copy(systemParam.CUSTOMER_SERVICE_ONE)" src="@/static/index/copy.png" mode=""></image>
											</view>
											<view class="account" v-if="index == 1">
												<text>{{ systemParam.CUSTOMER_SERVICE_TWO }}</text>
												<image @tap.stop="$tools.copy(systemParam.CUSTOMER_SERVICE_TWO)" src="@/static/index/copy.png" mode=""></image>
											</view>
											<view class="account" v-if="index == 2">
												<text>{{ systemParam.CUSTOMER_SERVICE_THREE }}</text>
												<image @tap.stop="$tools.copy(systemParam.CUSTOMER_SERVICE_THREE)" src="@/static/index/copy.png" mode=""></image>
											</view>
										</view>
									</view>
								</view>
								<view class="initBtn" @tap.stop="hidePopup('serverPopup')">确定</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- <scroll-view scroll-y class="typePage-mian"  @scrolltolower="lower"> -->
		<view class="indexBg">
			<view class="header_bar header_fixed header_imgBg">
				<view class="header-searchBox">
				<view class="searchBox">
					<view class="searchBox-item" @tap.stop="$tools.jump('/pages/search/search')">
						<image src="@/static/index/indexSearch.png" mode=""></image>
						<!--  :focus="true" -->
						<input type="text" placeholder="请输入要搜索的商品" placeholder-class="inputStyle">
					</view>
					<view class="searchBox-btn" @tap.stop="$tools.jump('/pages/search/search')">搜索</view>
				</view>
				<view class="right">
					<!-- <image class="ico" @tap.stop="$tools.jump('/pages/information/information')" src="@/static/index/icon-asset.png" mode=""></image> -->
					<!-- <image class="ico" @tap.stop="$tools.jump('/pages/car/car')" src="@/static/index/icon-cart.png" mode=""></image> -->
				</view>
			</view>
				<view class="scroll-view_tab">
					<view :class="[currIndex == -1?'active':'','scroll-view-item']"  @tap.stop="changeTap(item,-1)">
						推荐
					</view>
					  <view v-for="(item,index) in categoryOneList" :key="index" v-if="item.isPass ==1"
						:class="[currIndex == index?'active':'','scroll-view-item']"  @tap.stop="changeTap(item,index)">
						{{ item.cateName }}
						</view>
				</view>
			</view> 
				<view class="main" v-show="currIndex==-1">
				<view class="swiper-bg" v-if="info.length>0">
					<!-- 轮播图 -->
					<uni-swiper-dot :info="info" :current="current" mode="false">
						<view class="swiperBox index-swiperBox">
							<view class="swiperBox-wrapper">
								<swiper :indicator-dots="true" :autoplay="true" :interval="2500" :duration="1000" :circular="true" class="swiperBox-swiper" @change="changeSwiper"
								 indicator-dots indicator-color="rgba(255, 255, 255, 0.52)" indicator-active-color="#FFFFFF">
									<swiper-item class="swiperBox-swiper__item" v-for="(item, index) in info" :key="index">
										<image :src="imgShow(item)" mode="widthFix" ></image>
									</swiper-item>
								</swiper>
							</view> 
						</view>
					</uni-swiper-dot>
				</view>
			<!-- 专区列表 -->
			<view class="typeBox" v-if="categoryOneList.length != 0" :style="info.length==0?'margin-top:0':''">
				<view class="typeBox-list">
					<view class="typeBox-list__item" v-for="(item,index) in categoryOneList" :key="item.id"
					@tap.stop="$tools.jump('/pages/goods/goodsList','专区列表',item.id,item.cateName)" v-if="item.isPass==1">
						<image :src="imgShow(item.pic)" mode=""></image>
						<view class="typeBox-list__item-name">{{ item.cateName }}</view>
					</view>
				</view>
			</view>
			<!-- 天天好货 -->
			<view class="hot-goods" v-if="goodsDataList.length>0">
				<view class="hot-goods-top">
					<view class="title">{{ zoneName }}</view>
					<!-- <view class="title"><image src="@/static/index/index-title.png" mode="heightFix" class="ico"/><text class="sub">好货低价</text></view> -->
					<view class="more" @tap.stop="$tools.jump('/pages/goods/goodsList','热销榜单',zoneId,zoneName)">更多<image class="ico" src="@/static/index/next--red.png" mode=""></image></view>
				</view>
				<view class="hot-goods-list" v-if="isShowPage"  v-show="currIndex==-1">
						<view class="hot-goods-item" v-for="(item,index) in goodsDataList" :key="index" v-if="index<3"
						@tap.stop="$tools.jump('/pages/goods/goodsDetails',item.id)">
							<view class="imgBox">
								<image :src="imgShow(item.image)" mode="widthFix"></image>
							</view>
							<view class="content">
								<view class="give">
									<view class="ico">
									</view>
								<view class="give-num"><image class="ico" src="@/static/index/index-icon1.png" mode="widthFix" />{{ item.price}}</view>
								</view>
								<view class="name">{{ item.storeName }}</view>
								<view class="operateBig">
									<!-- <view class="price"><text class="unit">￥</text>{{ item.price }}</view> -->
									<!-- <view class="sales"><image class="ico" src="@/static/index/icon-cart1.png" mode="" /></view> -->
								</view>
							</view>
						</view>
				</view>
			</view>
			<!-- 福利 -->
			<!-- 轮播图 -->
			<uni-swiper-dot v-if="info1.length>0" :info="info1" :current="current1" mode="false" class="banner">
				<view class="swiperBox">
					<view class="swiperBox-wrapper">
						<swiper :indicator-dots="true" :autoplay="true" :interval="2500" :duration="1000" :circular="true" class="swiperBox-swiper" @change="changeSwiper1"
							indicator-dots indicator-color="rgba(255, 255, 255, 0.52)" indicator-active-color="#FFFFFF">
							<swiper-item class="swiperBox-swiper__item" v-for="(item, index) in info1" :key="index">
								<image :src="imgShow(item)" mode="widthFix" ></image>
							</swiper-item>
						</swiper>
					</view> 
				</view>
			</uni-swiper-dot>
			<!-- <image class="banner" src="@/static/index/index-banner1.png" mode="widthFix"></image> -->
			<view class="hot-goods fu-goods" v-if="goodsDataList1.length>0">
				<view class="hot-goods-top">
					<view class="title">{{ zoneName1 }}</view>
					<!-- <view class="title"><image src="@/static/index/index-title1.png" mode="heightFix" class="ico"/><text class="sub">优享福利</text></view> -->
					<view class="more" @tap.stop="$tools.jump('/pages/goods/goodsList','热销榜单',zoneId1,zoneName1)">更多<image class="ico" src="@/static/index/next--red.png" mode=""></image></view>
				</view>
				<view class="hot-goods-list fu-goods-list" v-if="isShowPage" v-show="currIndex==-1">
						<view class="hot-goods-item fu-goods-item" v-for="(item,index) in goodsDataList1" :key="index" v-if="index<6"
						@tap.stop="$tools.jump('/pages/goods/goodsDetails',item.id)">
							<view class="imgBox">
								<image :src="imgShow(item.image)" mode="widthFix"></image>
							</view>
							<view class="content">
								<view class="give">
									<view class="ico">
									</view>
								<view class="give-num"><image class="ico" src="@/static/index/index-icon1.png" mode="widthFix" />{{ item.price}}</view>
								</view>
								<view class="name">{{ item.storeName }}</view>
								<view class="operateBig">
									<!-- <view class="price">{{ item.price }}</view> -->
									<!-- <view class="sales"><image class="ico" src="@/static/index/icon-cart1.png" mode="" /></view> -->
								</view>
							</view>
						</view>
				</view>
			</view>

			<!-- 滚动公告 -->
			<!-- <view class="noticeBox">
				<view class="noticeBox-wrapper" @tap.stop="$tools.jump('/pages/information/information',1)">
					<view class="noticeBox-icon">
						<image class="icon" src="@/static/index/icon-index-notice.png" mode="widthFix"></image>
					</view>
					<view class="noticeBox-list noticeBox-swiper">
						<view class="noticeBox-swiper__item" v-for="(item, index) in noticeList">
							<uni-notice-bar scrollable color="#FFFFFF"
							class="noticeBox-swiper__item-label"
							:text="item.noticeTitle" />
						</view>
					</view>
					<view class="noticeBox-btn">
						<image src="@/static/index/more.png" mode=""></image>
					</view>
				</view>
			</view> -->
			<!-- <image class="banner" src="@/static/index/index-banner2.png" mode="widthFix"></image> -->
			<uni-swiper-dot v-if="info1.length>0" :info="info2" :current="current2" mode="false" class="banner">
				<view class="swiperBox">
					<view class="swiperBox-wrapper">
						<swiper :indicator-dots="true" :autoplay="true" :interval="2500" :duration="1000" :circular="true" class="swiperBox-swiper" @change="changeSwiper2"
							indicator-dots indicator-color="rgba(255, 255, 255, 0.52)" indicator-active-color="#FFFFFF">
							<swiper-item class="swiperBox-swiper__item" v-for="(item, index) in info2" :key="index">
								<image :src="imgShow(item)" mode="widthFix" ></image>
							</swiper-item>
						</swiper>
					</view> 
				</view>
			</uni-swiper-dot>
			</view>
			<!-- 商品列表 -->
			<!-- <scroll-view scroll-y class="typePage-right" scroll-with-animation="true"
				 @scrolltolower="lower" v-if="isShowPage"> -->
			<view :class="['indexGoods',currIndex!=-1?'main1':'']" >
				<view class="indexGoods-list">
					<view class="indexGoods-list__item" v-for="(item,index) in goodsDataList2" :key="index"
					@tap.stop="$tools.jump('/pages/goods/goodsDetails',item.id)">
						<view class="imgBox">
							<image :src="imgShow(item.image)" mode="aspectFill"></image>
						</view>
						<view class="content">
							<view class="name">{{ item.storeName }}</view>
							<view class="operateBig">
								<image class="ico-bg" src="@/static/index/index-titleBg1.png" mode="heightFix" />
								<view class="price">
								</view>
								<view class="sales">
									<image class="ico" src="@/static/index/index-icon1.png" mode="widthFix" />
									<text class="num">{{ item.price}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <goodsList :goodsDataList="goodsDataList"></goodsList> -->
			</view>
	</view>
<!-- </scroll-view> -->
	</view>
</template>

<script>
	// import customWaterfallsFlow from '@/components/custom-waterfalls-flow/custom-waterfalls-flow.vue';
	// import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue';
	export default {
		components:{
		},
		data() {
			return {
				info: [
					// {image: '../../static/index/banner.png'},{image: '../../static/index/banner.png'},
				],
				currIndex:-1,
				tabList:[
					{id:1,name:'推荐'},
					{id:2,name:'蔬果生鲜'},
					{id:3,name:'食品饮料'},
					{id:4,name:'美妆个护'},
					{id:5,name:'居家百货'},
					{id:6,name:'家电具'},
				],
				current: 0,
				current1: 0,
				current2: 0,
				noticeList: [
					// {noticeTitle: '查看最新公告'},
				],
				typeList: [ 
					// {category_name: '生态超市',url: '/pages/type/type'},
					// {category_name: '水果生鲜',url: '/pages/type/type'},
					// {category_name: '食品饮料',url: '/pages/type/type'},
					// {category_name: '日用百货',url: '/pages/type/type'},
					// {category_name: '美妆护肤',url: '/pages/type/type'},
					// {category_name: '联系客服',url: ''},
					// {category_name: '下载软件',url: '/pages/operate/download'},
					// {category_name: '邀请好友',url: '/pages/share/share'},
					// {category_name: '积分券',url: '/pages/balance/balance'},
					// {category_name: '充值',url: '/pages/balance/rechargeList'},
				],
				categoryOneList:[],
				heightTop: 0,
				pages: 1,
				pageIndex: 1,
				pageSize: 10,
				isShowPage: false,
				goodsDataList: [
					// {id: 1,storeName: '机油发动机润',price: '899.7',sales: 10,giveIntegral: 100},
					// {id: 2,storeName: '表现金美孚SP级0W-40全合成机油发动机润表现金美孚SP级0W-40全合成机油发动机润',price: '899.7',sales: 10,giveIntegral: 100},
					// {id: 3,storeName: '表现金美孚SP级0W-40全合成机油发动机润表现金美孚SP级0W-40全合成机油发动机润',price: '899.7',sales: 10,giveIntegral: 100},
					// {id: 4,storeName: '表现金美孚SP级0W-40',price: '899.7',sales: 10,giveIntegral: 100},
					// {id: 5,storeName: 'W-40全合成机油发动机润',price: '899.7',sales: 10,giveIntegral: 100},
				],
				pages1: 1,
				pages2: 1,
				total:0,
				info1:[],
				info2:[],
				goodsDataList1:[],
				goodsDataList2:[],
				advertisementList: [],
				userInfo: {},
				systemParam:{},
				currentSort:'',
				currentSortDir:'desc',
			}
		},
		computed: {
			newgoodsDataList() {
				return this.goodsDataList.sort((a, b) => {
					let sortDirection = 1;
					if (this.currentSortDir === 'desc') sortDirection = -1;
					return a[this.currentSort] < b[this.currentSort] ? -sortDirection : sortDirection;
				});
			}
		},
		onPageScroll(e) {
			this.heightTop = e.scrollTop;
		},	
		onLoad() {
			this.init();
		},
		onShow() {
			// this.init();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.init();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 500);
		},
		onReachBottom() {
			console.log("dd",this.total );
			if (this.goodsDataList2.length < this.total) {
				this.pageIndex++;
				console.log("pageIndex",this.pageIndex)
				if(this.currIndex==-1){
					this.getGoodsList()
				}else{
					this.getGoodsList1()
				}
			}
		},
		methods: {
			init(){
				this.isShowPage = false;
				this.currIndex = -1;
				this.total = 0
				this.pageIndex = 1;
				this.pageSize = 10;
				this.categoryOneList = []
				this.info =[]
				this.info1 =[]
				this.info2 =[]
				this.goodsDataList = []
				this.goodsDataList1 = []
				this.goodsDataList2 = []
				// this.getUserInfo();
				// this.getBannerList();
				this.noticeList = [];
				// this.getSysNoticeList();
				this.getSystemParam();
				this.getCategoryOneList()
				this.getHomeList()
			},
			// 切换
			changeTap(item,index){
				if(this.currIndex !=index){
					this.currIndex = index
					this.pageIndex = 1
					this.pages = 1
					this.total = 0
					this.info =[]
					this.info1 =[]
					this.info2 =[]
					this.goodsDataList = []
					this.goodsDataList1 = []
					this.goodsDataList2 = []
					if(index==-1){
						this.getHomeList()
					}else{
						this.cateId = item.id
						this.getGoodsList1()
					}
				}
			},
			imageClick(item){
				console.log("item:",item);
				this.$tools.jump('/pages/goods/goodsDetails',item.id);
			},
			// 去专区
			goUrl(item,index){
				if(index == 0){
					this.openPopup('serverPopup');
				}else{
					this.$tools.jump(item.url,2)
				}
			},
			goSwitchTabUrl(index){
				// uni.showLoading({
				// 	mask:true
				// })
				// this.$globalData.pIndex = index;
				// console.log(this.$globalData);
				// uni.setStorageSync('pIndex', index);
				// setTimeout(() => {
					// this.$tools.switchTab('/pages/type/type');
					// this.$tools.reLaunch('/pages/type/type',index);
					// uni.hideLoading();
				// },1000)
			},
			// 查询商品分类列表
			getCategoryOneList() {
				var data = {};
				data['pageIndex'] = 1;
				data['pageSize'] = 100;
				this.$Ajax('/api/product/categoryOneList',data,res => {
						if (res.code == 200) {
							this.categoryOneList = res.data.list;
							this.isTure = this.categoryOneList.some(item=>item.isPass ==1)
							console.log('isTrue',this.isTure)
						}
					}, err =>{
					}, 'GET'
				)
			},
			// 推荐下面的商品分页
			getGoodsList(){
				var data = {
					pageIndex:this.pageIndex,
					pageSize:this.pageSize,
					zoneId :this.zoneId2
				};
				// uni.showLoading({
				// 	mask:true
				// })
				this.$Ajax('/api/product/discountList',data,res => {
					uni.hideLoading();
					this.isShowPage = true;
						if (res.code == 200) {
							this.pages = res.data.pages;
							this.total = res.data.total;
							this.goodsDataList2 = this.goodsDataList2.concat(res.data.list);
						}
					}, err =>{
						this.isShowPage = true;
						uni.hideLoading();
					}, 'GET'
				)
			},
			// 查询首页商品推荐列表
			getHomeList(type) {
				var data = {
					zoneType:1,
					pageIndex:this.pageIndex,
					pageSize:this.pageSize
				};
				// uni.showLoading({
				// 	mask:true
				// })
				this.$Ajax('/api/product/homeProducts',data,res => {
					uni.hideLoading();
					this.isShowPage = true;
					if (res.code == 200) {
						const data = res.data[0]
						this.info = data.images?(data.images).split(','):[]
						this.zoneId = data.id 
						this.zoneName = data.name 
						console.log('info',this.info)
						this.goodsDataList = data.productPage.list;
						const data1 = res.data[1]
						this.info1 = data1.images?(data1.images).split(','):[]
						this.goodsDataList1 = data1.productPage.list;
						this.zoneId1 = data1.id 
						this.zoneName1 = data1.name 
						const data2 = res.data[2]
						this.total = data2.productPage.total;
						this.info2 = data2.images?(data2.images).split(','):[]
						this.zoneId2 = data2.id 
						this.zoneName2 = data2.name 
						this.goodsDataList2 = this.goodsDataList2.concat(data2.productPage.list);
						console.log('goodsDataList2',this.goodsDataList2,data2.productPage.total)
						this.sortBy('sort')
					}
					}, err =>{
						uni.hideLoading();
					}, 'GET'
				)
			},
			sortBy(sortField) {
				this.currentSort = sortField;
				this.currentSortDir = this.currentSortDir === 'asc' ? 'desc' : 'asc';
			},
			// 查询分类商品列表
			getGoodsList1() {
				var data = {
					pageIndex:this.pageIndex,
					pageSize:this.pageSize,
					cateId:this.cateId
				};
				// uni.showLoading({
				// 	mask:true
				// })
				this.$Ajax('/api/product/discountList',data,res => {
					uni.hideLoading();
					this.isShowPage = true;
						if (res.code == 200) {
							this.pages = res.data.pages;
							this.total = res.data.total;
							this.goodsDataList2 = this.goodsDataList2.concat(res.data.list);
						}
					}, err =>{
						this.isShowPage = true;
						uni.hideLoading();
					}, 'GET'
				)
			},
			// 公告
			getSysNoticeList() {
				var data = {};
				data['pageIndex'] = 1;
				data['pageSize'] = 1;
				console.log("data：",data);
				this.$Ajax('/api/notice/getSysNoticeList',data,res => {
						if (res.code == 200) {
							this.noticeList = this.noticeList.concat(res.data.list);
						}
					}, err =>{
					}, 'GET' , false
				)
			},
			// 轮播图
			getBannerList() {
				var data = {
					type:1
				};
				this.$Ajax('/api/notice/getBannerList',data,res => {
						if(res.code == 200){
							this.info = res.data;
						}
					}, err => {
					}, 'GET', false
				)
			},
			lower(){
				console.log("分页",this.total);
				if (this.goodsDataList2.length < this.total) {
					this.pageIndex++;
					console.log("pageIndex",this.pageIndex)
					if(this.currIndex==-1){
						this.getHomeList(3)
					}else{
						this.getGoodsList1()
					}
				}
			},
			changeSwiper(e) {
				this.current = e.detail.current;
			},
			changeSwiper1(e) {
				this.current1 = e.detail.current;
			},
			changeSwiper2(e) {
				this.current2 = e.detail.current;
			},
			/* 弹出框公用 */
			openPopup(e, item) {
				this.popupInfo = item;
				this.$refs[e].open();
			},
			hidePopup(e) {
				this.$refs[e].close();
				this.password = '';
			},
			changePopup(e) {
				console.log('popup ' + e.type + ' 状态', e.show);
			},
		}
	}
</script>

<style scoped lang="scss">
	.pages{
		background: #F9F9F9;
		overflow-y: auto;
		// padding-bottom: 40rpx;
		padding-bottom: 140rpx;
		// height: 100vh;
	}
	.header{
		height: auto !important; 
		&-left{
			.logo{
				width: 52rpx;
				height: 36rpx;
			}
			.logoTitle{
				width: 128rpx;
				height: 40rpx;
				margin-left: 14rpx;
			}
		}
		& + view {
			padding-top: 0 !important;
		}
	}
	.header_imgBg{
		background: linear-gradient( 180deg, #FA6A45 0%, #F94123 100%);
		width: 100vw;
		height: calc(194rpx);
		/* #ifdef APP-PLUS */
		height: calc(194rpx + var(--status-bar-height) - 20rpx);
		padding-top: var(--status-bar-height);
		/* #endif */
		/* #ifdef H5 */
		padding-top: 20rpx;
		/* #endif */
	}
	.header_fixed + view{
		padding-top: 0 !important;
	}
	.typePage-mian{
		width: 100%;
		margin: 0;
		padding: 0;
		height: 100vh;
	}
	.main,.main1{
		/* #ifdef APP-PLUS */
			margin-top: calc(194rpx + var(--status-bar-height) - 30rpx);
		/* #endif */
		/* #ifdef H5 */
			margin-top: calc(194rpx - 10rpx);
		/* #endif */
	}
	
	.indexBg{
		// background: linear-gradient(0deg, #F1F1F1 5%, #F1F1F1 12%, #1381F6 26%, #407FFF 99%);
		// background: url('@/static/index/bg.png');
		// background-size: 100% 100%;
		// background-repeat: no-repeat;
		width: 100vw;
		// /* #ifdef APP-PLUS */
		// 	height: 902rpx;
		// /* #endif */
		// /* #ifdef H5 */
		// 	height: 1002rpx;
		/* #endif */
	}
	
	/deep/ uni-swiper .uni-swiper-dots-horizontal{
		bottom: 13px !important;
	}
	/deep/ .uni-swiper-dot{
		width: 8rpx !important;
		height: 8rpx !important;
	}
	/deep/ .uni-swiper-dot-active{
		width: 30rpx !important;
		border-radius: 4rpx !important;
	}
	.header-searchBox{
		padding: 0 24rpx;
		@include flexBetween;
		.right{
			@include flexLeft;
			.ico{
				width: 72rpx;
				height: 72rpx;
				margin-left: 28rpx;
			}
			image{
				width: 100%;
				height: 100%;
			}
		}

	}
	.searchBox{
		// width: calc(100% - 60rpx);
		width: 710rpx;
		height: 72rpx;
		// margin: 10rpx 30rpx 16rpx;
		background: #FFFFFF;
		border-radius: 58rpx;
		background: #F9F9F9;
		box-shadow: inset 0rpx 28rpx 32rpx 0rpx rgba(255,0,0,0.16);
		&-item{
			padding: 0 4rpx 0 30rpx;
			input{
				padding: 0 12rpx;
			}
			.input{
				font-family: PingFangSC-Regular, PingFangSC-Regular;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
		&-btn{
			background: linear-gradient( 180deg, #FA6A45 0%, #F94123 100%);
			border-radius: 56rpx;
			width: 120rpx;
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			padding: 0;
		}
	}
	.scroll-view_tab{
		@include flexLeft;
		padding: 34rpx 0rpx 10rpx 24rpx;
		overflow-x: auto;
		white-space: nowrap;
		width: 100%;
		font-size: 28rpx;
		color: #FFFFFF;
		.scroll-view-item{
			margin-right: 42rpx;
			// display: inline-block;
			position: relative;
			padding-bottom: 10rpx;
			font-size: 28rpx;
		}
		.active{
			font-weight: bold;
			font-size: 36rpx;
			// border-bottom: 2px solid #fff;
		}
		.active::after{
			content: '';
			width: 50%;
			height: 2px;
			background: #fff;
			border-radius: 60rpx;
			position: absolute;
			bottom: 0;
			left: 20%;
			// bottom: 8px;
			// left: 0;
			// width: 44rpx;
			// height: 6rpx;
			// background: #FFFFFF;
			// border-radius: 60rpx 60rpx 60rpx 60rpx;
		}	
		.scroll-view-item:nth-of-type(1){
			margin-left:0;
		}
	}
	// 滚动公告
	.noticeBox {
		margin: 0rpx 28rpx 0;
		font-size: 28rpx;
		position: relative;
		z-index: 1;
		&-wrapper {
			@include flexBetween;
			// background: rgba(167,167,167,0.1);
			// border-radius: 18rpx;
			// border: 2rpx solid rgba(167,167,167,0.102);
			padding: 20rpx 30rpx;
		}
	
		&-icon {
			@include flexLeft;
			.icon {
				width: 34rpx;
				@include fullImage;
				margin-right: 36rpx;
			}
		}
	
		&-swiper {
			height: 60rpx;
			flex: 1;
			padding-right: 10rpx;
	
			&__item {
				@include flexCenter;
				&-label {
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					background: none !important;
				}
			}
		}
	
		&-btn {
			image{
				width: 10rpx;
				height: 20rpx;
			}
		}
	}
	.swiper-bg{
		width: 100%;
		height: 320rpx;
		position: relative;
		uni-swiper{
			height: 320rpx;
		}
	}
	.swiper-bg .uni-swiper__warp{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	// 专区列表
	.typeBox{
		width: 93.6%;
		margin: auto;
		height: 174rpx;
		margin-top: -20rpx;
		position: relative;
		z-index: 1;
		border-radius: 20rpx;
		// padding: 0 28rpx; 
		&-list{
			background: url(../../static/index/index-tabBg.png) no-repeat;
			background-size: 100% 100%;
		/* 毛玻璃 高斯模糊 */
			backdrop-filter: blur(5px) !important;
			background-color: rgba(255, 255, 255 ,0.32) !important;
			border-radius: 20rpx;
			position: absolute;
			top: 0;
			width: 100%;
			@include flexBetween;
			// flex-wrap: wrap;
			padding: 20rpx 0;
			overflow-x: auto;
			&__item{
				width: 20%;
				text-align: center;
				@include flexCenterColumn;
				// margin: 30rpx 0 0;
				padding: 0 10rpx;
				position: relative;
				image{
					width: 88rpx;
					height: 88rpx;
					/* #ifdef APP-PLUS */
					width: 88rpx;
					height: 88rpx;
					/* #endif */
				}
				&-name{
					width: 100%;
					font-size: 24rpx;
					color: #000;
					font-weight: bold;
					margin-top: 14rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}
		}
	}
	// 天天好货
	.hot-goods{
		overflow: hidden;
		width: 93.6%;
		margin: auto;
		margin-top: 20rpx;
		background: #fff;
		border-radius: 20rpx;
		background: url(../../static/index/index-infoBg.png) no-repeat;
		background-size: 100% 100%;
		padding: 0 20rpx;
		&-top{
			@include flexBetween;
			.title{
				// width: 298rpx;
				// text-align: center;
				// height: 68rpx;
				// line-height: 68rpx;
				// background: url(@/static/index/index-titleBg.png) no-repeat;
				// background-size: 100% 100%;
				// padding: 22rpx 56rpx 14rpx 22rpx;
				padding: 22rpx;
				color: #fff;
				font-size: 32rpx;
				.ico{
					width: 220rpx;
					height: 40rpx;
					display: inline-block;
   	 			vertical-align: middle;
					margin-top: -5rpx;
				}
				.sub{
					display: inline-block;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 24rpx;
					margin-left: 10rpx;
				}
			}
			.more{
				margin-top: 12rpx;
				width: 120rpx;
				text-align: center;
				height: 48rpx;
				line-height: 48rpx;
				// background: linear-gradient( 180deg, #FA6A45 0%, #F94123 100%);
				// border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;
				// border: 2rpx solid;
				// border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 2 2;
				background: #fff;
				color: #FA6A45;
				font-weight: 500;
				font-size: 24rpx;
				border-radius: 24rpx;
			}
			.ico{
				width: 24rpx;
				height: 24rpx;
				display: inline-block;
				vertical-align: middle;
				margin-left: 10rpx;
			}
		}
		&-list{
			display: flex;
			// margin-top: 20rpx;
			overflow-x: auto;
			overflow: hidden;
			padding: 20rpx;
			background: #fff;
			border-radius: 5px;
		}
		&-item 
			{
				// width: 228rpx;
				width:calc((100% - 40rpx) / 3);
				margin-left:20rpx;
				padding: 12rpx 0;
				padding-top: 0;
				.imgBox{
				  border-radius: 15px 15px 0 0;
					width: 100%;
					height: 208rpx;
					overflow: hidden;
					position: relative;
				}
				.give{
					@include flexLeft;
					margin-top: 10rpx;
					font-weight: bold;
					.ico{
						width: 68rpx;
						text-align: center;
						height: 68rpx;
						line-height: 68rpx;
						background: url(@/static/index/index-send.png) no-repeat;
						background-size: 100% 100%;
						color: #FFBB8A;
						font-size: 24rpx;
						padding-top: 5rpx;
					}
					color: #FFFFFF;
					.give-num{
						@include flexLeft;
						.ico{
							width: 36rpx;
							margin-right: 10rpx;
							margin-top: -8rpx;
						}
						margin-left: -10rpx;
						margin-top: 10rpx;
						width: calc(100% - 68rpx);
						padding: 5rpx 0;
						padding-top: 8rpx;
						padding-left: 24rpx;
						// height: 57rpx;
						// line-height: 57rpx;
						line-height: 28rpx;
						background: url(@/static/index/index-titleBg2.png) no-repeat;
						background-size: 100% 100%;
						font-size: 20rpx;
						background-color: linear-gradient( 180deg, #FFE1A4 0%, #FEBE79 100%);
					}
			}
				.name{
					margin-top: 10rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;
					height: 40rpx;
					line-height: 40rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.operateBig{
					@include flexBetween;
					.sales{
						@include flexLeft;
						color: #FA6A45;
						font-weight: bold;
						font-size: 28rpx;
					}
					.ico{
							width: 36rpx;
							margin-right: 10rpx;
							margin-top: -8rpx;
						}
					margin-top: 10rpx;
				}
				.price{
					.unit{
						font-size: 24rpx;
						font-weight: normal;
					}
					font-size: 34rpx;
					font-weight: bold;
					color: #F15D39;
				}
				.ico{
					width: 44rpx;
					height: 44rpx;
				}
			}
			&-item:nth-child(1){
				margin-left: 0;
			}	
			.indexGoods-list__item :nth-child(2n+1){
				margin-left: 0;
			}
	}
	// 福利
	.fu{
		&-goods{
			// background: none;
		}
		&-goods-list{
			flex-wrap: wrap;
			margin-top: 0;
		}
		&-goods-item{
			width:calc((100% - 40rpx) / 3);
			margin-top: 20rpx;
			.imgBox{
				width:100%;
			}
			.name,.operateBig{
				padding: 0 10rpx;
			}
		}
		&-goods-item:nth-of-type(3n+1){
			margin-left: 0;
		}
	}
	.banner{
		width: 93.6%;
		margin: auto;
		margin-top: 20rpx;
		image{
			border-radius: 15px;
		}
		uni-swiper{
			height: 200rpx;
		}
	}
	.integralBg{
		@include flexBetween;
		margin: 6rpx 28rpx 14rpx;
		.otherBox{
			@include flexRightColumn;
			width: 48%;
			&-item{
				border-radius: 10rpx;
				position: relative;
				// width: 336rpx;
				width: 100%;
				height: 190rpx;
				padding: 24rpx 14rpx;
				.title{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
				}
				.tips{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					margin: 12rpx 0;
				}
				.btn{
					background: #FFFFFF;
					box-shadow: inset 0rpx 0rpx 10rpx 0rpx rgba(255,255,255,0.5);
					border-radius: 20rpx;
					padding: 4rpx 14rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					// display: inline-flex;
					@include flexCenter;
					width: 94rpx;
					.next{
						width: 8rpx;
						height: 16rpx;
						margin-left: 14rpx;
					}
				}
				.rightImg{
					position: absolute;
					right: 0;
					bottom: 8rpx;
				}
				&:nth-child(1){
					background: #E9F0FF;
					margin-bottom: 28rpx;
					.title{
						color: #03275B;
					}
					.tips{
						color: rgba(3,39,91,0.59);
					}
					.btn{
						color: #03275B;
					}
					.rightImg{
						width: 164rpx;
						height: 174rpx;
					}
				}
				&:nth-child(2){
					background: #FFDBDA;
					.title{
						color: #FF2A1D;
					}
					.tips{
						color: rgba(255,42,29,0.53);
					}
					.btn{
						color: #FF2A1D;
					}
					.rightImg{
						width: 176rpx;
						height: 174.76rpx;
					}
				}
				// image{
				// 	width: 336rpx;
				// 	height: 186rpx;
				// 	border-radius: 10rpx;
				// }
				
			}
		}
	}
	.integral{
		background: #E1EEFF;
		border-radius: 10rpx;
		@include flexLeft;
		align-items: flex-start;
		padding: 24rpx 0 0 22rpx;
		// width: 336rpx;
		width: 48%;
		// height: 400rpx;
		height: 408rpx;
		position: relative;
		&-item{
			@include flexLeftColumn;
			.name{
				font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
				font-weight: 700;
				font-size: 36rpx;
				color: #3D8DFF;
			}
			.tips{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #0E4076;
				margin: 6rpx 0 12rpx;
			}
			.btn{
				@include flexCenter;
				background: linear-gradient( 135deg, #0067F2 0%, #3DBBFF 99%);
				border-radius: 76rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				padding: 8rpx 28rpx;
				image{
					width: 32rpx;
					height: 32rpx;
					margin-left: 16rpx;
				}
			}
		}
		.icon{
			width: 274rpx;
			height: 240rpx;
			position: absolute;
			bottom: 0;
			left: 0;right: 0;
			margin: auto;
		}
	}
	
	.tipsBox{
		align-items: baseline;
	}
	
	.psdBox{
		&-wrapper{
			width: 90% !important;
			.serverBox{
				padding: 8rpx 30rpx 44rpx;
				&-tips{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #7B7878;
					text-align: center;
				}
				&-list{
					@include flexLeftColumn;
					margin: 66rpx auto;
					&__item{
						@include flexLeft;
						background: #FFFFFF;
						box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.1);
						border-radius: 10rpx;
						padding: 20rpx 18rpx;
						width: 100%;
						margin-bottom: 20rpx;
						.serverImgBox{
							width: 98rpx;
							height: 98rpx;
							margin-right: 20rpx;
							image{
								width: 100%;
								height: 100%;
							}
						}
						.serverContent{
							width: calc(100% - 118rpx);
							.name{
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 32rpx;
								color: #3D3D3D;
							}
							.account{
								@include flexLeft;
								text{
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									font-size: 28rpx;
									color: #888888;
									word-break: break-all;
									@include initMoreLine(1);
								}
								image{
									width: 32rpx;
									height: 32rpx;
									margin-left: 10rpx;
								}
							}
						}
					}
				}
			}
		}
	}
	image{
			width: 100%;
			height: 100%;
		}
</style>
